<template>
  <div class="map_con left" id="car_control">
    <!--左侧地图-->
    <div class="left map_left">
      <div class="map_box" id="map_box"></div>
      <div class="map_top">
        <!-- <div class="dropdown" style="float:left">
          <button class="dropbtn">吨位统计</button>
          <div class="dropdown-content">
            <a href="javascript:void(0)" onclick="add()">全市吨位统计</a>
            <a href>按区吨位统计</a>
          </div>
        </div>-->
        <!-- <div class="dropdown">
          <button class="dropbtn">吨位统计</button>
          <div class="dropdown-content">
            <a href="">全市吨位统计</a>
            <a href="">按区吨位统计</a>
          </div>
        </div>-->
        <div class="dropdown" style="float:right">
          <button class="dropbtn">视图</button>
          <div class="dropdown-content">
            <a href>设置</a>
            <!-- <a href="">按区吨位统计</a> -->
          </div>
        </div>
        <!-- <ul>
          <li class="active">
            <i></i>
            <a
              class="active"
              @mouseenter="workAreaListShow = true"
              @mouseleave="workAreaListShow = false"
            >吨数统计</a>
          </li>
          <li class="active">
            <i class="glyphicon glyphicon-pencil"></i>
            <a href="javascript:void (0)" class="active">图层选择</a>
          </li>
          <li>
            <i class="glyphicon glyphicon-zoom-in"></i>
            <a href="javascript:void (0)">缩小</a>
          </li>
          <li>
            <i class="glyphicon glyphicon-zoom-out"></i>
            <a href="javascript:void (0)">放大</a>
          </li>
          <li>
            <i class="glyphicon glyphicon-screenshot"></i>
            <a href="javascript:void (0)">对比</a>
          </li>
          <li>
            <i class="glyphicon glyphicon-search"></i>
            <a href="javascript:void (0)">搜索</a>
          </li>
          <li>
            <i class="glyphicon glyphicon-wrench"></i>
            <a href="javascript:void (0)">工具</a>
          </li>
          <li>
            <i class="glyphicon glyphicon-fullscreen"></i>
            <a href="javascript:void (0)">全屏</a>
          </li>
        </ul>-->
      </div>
      <div class="map_select">
        <p>
          <input id="checkbox_car" type="checkbox" checked @click="handleCheckCar" />
          <span>车辆</span>
          <!-- <span @click="handleCheckCar_span">车辆</span> -->
        </p>
        <p>
          <input id="checkbox_village" type="checkbox" @click="handleCheckVillage" />
          <span>小区垃圾点</span>
        </p>
        <p>
          <input id="checkbox_restaurant" type="checkbox" @click="handleCheckRestaurant" />
          <span>餐饮单位</span>
        </p>
        <p>
          <input id="checkbox_restaurant2" type="checkbox" @click="handleCheckRestaurant2" />
          <span>沿街小饭店</span>
        </p>
        <p>
          <input id="checkbox_clc" type="checkbox" checked @click="handleCheckCLC" />
          <span>处理厂</span>
        </p>
        <p>
          <input id="checkbox_zzz" type="checkbox" @click="handleCheckZZZ" />
          <span>中转站</span>
        </p>
      </div>
    </div>
    <div class="work_area_list" v-if="workAreaListShow">
      <!-- <span>清扫队作业道路设定</span> -->
      <span @click="openCleanerTeam">班组作业道路设定</span>
      <span @click="openPersonnelRoad">人员作业道路设定</span>
    </div>
    <!-- <vdr class="vdr" @resizing="resize" :draggable="false"> -->
    <!-- 下列信息栏 -->
    <div class="footer_info">
      <vdr class="vdr" @resizing="resize" :draggable="false">
        <div class="top_box">
          <div class="table_find">
            <div class="tables_s">
              <p>
                <span>车牌号：</span>
                <input type="text" placeholder="请输入车牌号" v-model="carname" @input="getmohu()" />
              </p>
              <p>
                <span>分组：</span>
                <!-- <el-select v-model="key" placeholder="请选择" @change="groups()">
              <el-option
                v-for="item in grouplist"
                :key="item.CLIENT_NO"
                :value="item.CLIENT_NO">
              </el-option>
                </el-select>-->
                <select name id @change="groups($event)">
                  <option
                    :value="item.CLIENT_NO"
                    :valus="item.CLIENT_NAME"
                    v-for="item in grouplist"
                    :key="item.CLIENT_NO"
                  >{{item.CLIENT_NAME}}</option>
                </select>
              </p>
              <label for class="sorts" @change="agreeChange">
                排序：
                <el-radio v-model="radio" label="1">定位时间</el-radio>
                <el-radio v-model="radio" label="2">称重时间</el-radio>
              </label>
              <p class="babel_img" @click="searchitem">
                <img src="../../assets/images/search.png" alt />
                <button>查询</button>
              </p>
              <p style="min-width:115px">
                <!-- <span>
              在线车辆：
              <b>10</b>/
                </span>-->
                <span>
                  全部车辆：
                  <b>{{carList.length}}</b>
                </span>
              </p>
              <button class="onlion" @click="realtime">实时在线统计</button>
              <button class="onlion" @click="exportExcelBaseInfo">导出基础信息表</button>
              <button class="onlion" @click="exportExcelRealtimeInfo">导出实时信息表</button>
            </div>
          </div>
        </div>
        <div class="content">
          <el-table
            :data="carList"
            height="100%"
            @row-dblclick="dblClickRow"
            @row-contextmenu="rowHandle"
            style="width: 100%;"
            class="table_elemet"
            :default-sort="{prop: 'carList', order: 'descending'}"
          >
            <el-table-column prop="VID" label="车辆编号" width="80"></el-table-column>
            <el-table-column prop="LICENSE_PLATE" label="车辆名称" width="110"></el-table-column>
            <!-- <el-table-column
                prop="RFID"
                label="RFID号"
                width="130">
            </el-table-column>-->
             <el-table-column prop="CLIENT_NAME" label="分组" sortable width="110"></el-table-column>
            <el-table-column prop="WEIGHING_TIME" label="称重时间" sortable width="150"></el-table-column>
            <el-table-column prop="TONNANG" label="称重吨数" width="75"></el-table-column>
            <el-table-column prop="RUBBISHTYPE" label="垃圾类型" width="75"></el-table-column>
            <el-table-column prop="RUBBISH_REGION" label="垃圾所属区" width="120"></el-table-column>
            <el-table-column prop="FACTORY" label="处理场名称" width="100"></el-table-column>
            <el-table-column prop="CAR_TYPE" label="车辆类型"></el-table-column>
            <el-table-column prop="ORIENTATION_TIME" label="最终定位时间" sortable width="170"></el-table-column>
            <el-table-column prop="POSITION" label="位置" width="220"></el-table-column>
            <el-table-column prop="Direction" label="航向"></el-table-column>
            <el-table-column prop="SPEED" label="航速"></el-table-column>
            <el-table-column prop="LONGITUDE" label="经度" width="100"></el-table-column>
            <el-table-column prop="LATITUDE" label="纬度" width="100"></el-table-column>
          </el-table>
        </div>
      </vdr>
    </div>
    <!-- </vdr> -->
    <!-- 右键人员列表菜单 -->
    <div class="row_box" v-if="MouseEvent.isShow" :style="`left: ${MouseEvent.left}px; top: ${MouseEvent.top}px;`">
      <!-- <span @click="exportRowExcel">导出Excel</span> -->
      <!-- <span @click="groupArea(teamNumber)">负责区域</span> -->
      <!-- <span @click="clearArea(teamNumber)">清扫队负责区域</span> -->
      <!-- <span>负责区域</span> -->
      <!-- <span @click="cleanArea">清除区域</span> -->
      <span @click="trajectory">轨迹回放</span>
    </div>
    <!--右侧功能栏-->
    <div class="map_right">
      <vdr class="vdr" @resizing="resizeWidth" :draggable="false">
        <div class="map_right_top">
          <ul>
            <li class="li_active">报警信息</li>
            <!-- <li>分类搜索</li>
            <li>专题信息</li>-->
          </ul>
        </div>
        <div class="map_con">
          <div class="map_con_div" style="display: block">
            <!-- <div class="map_chart">
              <p id="char1" ref="char1" class="p_chart"></p>
            </div>-->
            <div class="div_any_child">
              <!--<div class='div_any_title'><img src='img/title_4.png'>行驶时长排名前5位 </div>-->
              <div class="table_p">
                <table>
                  <thead>
                    <tr>
                      <!-- <th>序号</th> -->
                      <th>车牌号</th>
                      <th>类型</th>
                    </tr>
                  </thead>
                  <tbody class="tbodys">
                    <tr v-for="item in list" :key="item.NAME">
                      <td>{{item.NAME}}</td>
                      <td>{{item.WORKTYPE}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="map_con_div">
            <p>
              <input type="text" placeholder="输入关键字" class="carNo_input" />
              <input type="button" class="find_but" />
            </p>
            <div class="map_work">
              <ul>
                <li>
                  <div class="img_div img_div01"></div>
                  <div class="img_div_text">便民服务</div>
                </li>
                <li>
                  <div class="img_div img_div02"></div>
                  <div class="img_div_text">便民服务</div>
                </li>
                <li>
                  <div class="img_div img_div01"></div>
                  <div class="img_div_text">便民服务</div>
                </li>
                <li>
                  <div class="img_div img_div01"></div>
                  <div class="img_div_text">便民服务</div>
                </li>
                <li>
                  <div class="img_div img_div01"></div>
                  <div class="img_div_text">便民服务</div>
                </li>
                <li>
                  <div class="img_div img_div01"></div>
                  <div class="img_div_text">便民服务</div>
                </li>
                <li>
                  <div class="img_div img_div01"></div>
                  <div class="img_div_text">便民服务</div>
                </li>
                <li>
                  <div class="img_div img_div01"></div>
                  <div class="img_div_text">便民服务</div>
                </li>
                <li>
                  <div class="img_div img_div01"></div>
                  <div class="img_div_text">便民服务</div>
                </li>
              </ul>
              <div class="map_resList">
                <p class="set_list">
                  <i class="list_i"></i> 查询结果：
                  <span class="right">
                    <i class="glyphicon glyphicon-backward back_i"></i>
                    <a href="javascript:void(0)" onclick="back()">返回</a>
                  </span>
                </p>
                <ul>
                  <li>
                    <p>
                      <strong>爱尚美术馆</strong>
                      <span class="right">
                        <a href="javascript:void(0)" title="视频">
                          <img src="img/nav_5.png" />
                        </a>
                        <a href="javascript:void(0)" title="定位">
                          <img src="img/find01.png" />
                        </a>
                      </span>
                    </p>
                    <p>四川省成都市高新区北美一路31号</p>
                  </li>
                  <li>
                    <p>
                      <strong>爱尚美术馆</strong>
                      <span class="right">
                        <a href="javascript:void(0)" title="视频">
                          <img src="img/nav_5.png" />
                        </a>
                        <a href="javascript:void(0)" title="定位">
                          <img src="img/find01.png" />
                        </a>
                      </span>
                    </p>
                    <p>四川省成都市高新区北美一路31号</p>
                  </li>
                  <li>
                    <p>
                      <strong>爱尚美术馆</strong>
                      <span class="right">
                        <a href="javascript:void(0)" title="视频">
                          <img src="img/nav_5.png" />
                        </a>
                        <a href="javascript:void(0)" title="定位">
                          <img src="img/find01.png" />
                        </a>
                      </span>
                    </p>
                    <p>四川省成都市高新区北美一路31号</p>
                  </li>
                  <li>
                    <p>
                      <strong>爱尚美术馆</strong>
                      <span class="right">
                        <a href="javascript:void(0)" title="视频">
                          <img src="img/nav_5.png" />
                        </a>
                        <a href="javascript:void(0)" title="定位">
                          <img src="img/find01.png" />
                        </a>
                      </span>
                    </p>
                    <p>四川省成都市高新区北美一路31号</p>
                  </li>
                  <li>
                    <p>
                      <strong>爱尚美术馆</strong>
                      <span class="right">
                        <a href="javascript:void(0)" title="视频">
                          <img src="img/nav_5.png" />
                        </a>
                        <a href="javascript:void(0)" title="定位">
                          <img src="img/find01.png" />
                        </a>
                      </span>
                    </p>
                    <p>四川省成都市高新区北美一路31号</p>
                  </li>
                </ul>
                <div id="page"></div>
              </div>
            </div>
          </div>
          <div class="map_con_div">
            <div class="bow_shadow">
              <p>
                <input type="text" placeholder="输入关键字" class="carNo_input" />
                <input type="button" class="find_but" />
              </p>
              <p class="set_list">
                <i class="list_i"></i> 专题列表：
              </p>
              <!-- <p><ul id='treeDemo' class='ztree'></ul></p> -->
            </div>
          </div>
        </div>
      </vdr>
    </div>
    <el-dialog title="实时在线统计" :visible.sync="realtimedialog" class="dialogwhole" width="50%" style="height:500px;overflow-y: scroll">
         <table style="width:100%;text-align:center;border-collapse:collapse" class="tables">
           <thead>
            <tr>
             <th>区域名称</th>
             <th>在线车辆</th>
             <th>全部车辆</th>
            </tr>
           </thead>
           <tbody>
             <tr v-for="item in realdata" :key="item.AreaName">
               <td>{{item.AreaName}}</td>
               <td>{{item.OnlineVehicle}}</td>
               <td>{{item.AllVehicle}}</td>
             </tr>
           </tbody>
         </table>
      <!-- 内层弹框 -->
      <!-- <div slot="footer" class="dialog-footer">
       <p>统计时间：<span>2020/9/22 - 15:00:17</span></p>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>

// import { echarts } from '@/assets/js/echarts-all.js'
// import { char1 } from '@/assets/js/static.js'
import export2Excel from '../../components/exportExcel/index'
import img from '@/assets/images/resizeApi.png'
import imgs from '@/assets/images/truck.png'
import imgss from '@/assets/images/dining.png'

import imgMarkerCLC from '@/assets/images/marker/markerImageCLC.png'
import imgMarkerRestaurant from '@/assets/images/marker/markerImageRestaurant.png'
import imgMarkerRestaurant2 from '@/assets/images/marker/markerImageRestaurant2.png'
import imgMarkerVillage from '@/assets/images/marker/markerImageVillage.png'
import imgMarkerZZZ from '@/assets/images/marker/markerImageZZZ.png'
// import { add } from '@/assets/js/table1.js'

export default {
  data () {
    return {
      MouseEvent: {
        top: 0,
        left: 0,
        isShow: false
      },
      teamNumber: '',
      row: null,
      workAreaListShow: false,
      key: '',
      list: [
        { NAME: '津ADB3675', WORKTYPE: '称重异常' },
        { NAME: '津ADB6723', WORKTYPE: '称重异常' },
        { NAME: '津ADC9267', WORKTYPE: '超速报警' },
        { NAME: '津ADB3674', WORKTYPE: '超速报警' }
      ],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      carList: [],
      clcList: [],
      timeId: null,
      allMap: null,
      footerHeight: document.body.clientHeight * 0.25,
      asideWidth: parseInt(document.body.clientWidth * 0.15),
      mapHeight: document.body.clientHeight * 0.66,
      mapWidth: document.body.clientWidth * 0.85,
      itemname: '',
      timmer: '',
      radio: '1',
      carname: '',
      grouplist: [],
      markerARR_Car: [],
      markerARR_Restaurant: [],
      markerARR_Restaurant2: [],
      markerARR_Village: [],
      markerARR_CLC: [],
      markerARR_ZZZ: [],
      realtimedialog: false,
      realdata: []
    }
  },
  created () {
    // this.getList()//暂时注销，下行写死数据。正常应该注销下行，放开此行
    // 车辆信息列表
    this.getCarList()
    this.grouping()
    // console.log(this.radio)
    // console.log(this.$route.query.codes)
  },
  methods: {
    async realtime () {
      this.realtimedialog = true
      var cod = localStorage.getItem('codes')
      const { data } = await this.$axios.get('http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetRealTimeOnlineApi?ClientNo=' + cod)
      this.realdata = data.filter(item => {
        return item
      })
    },
    async agreeChange () {
      var cod = localStorage.getItem('codes')
      const { data } = await this.$axios.get('http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetKitchenCarListApi?ClientNo=' + cod)
      console.log(data)
      if (Number(this.radio) === 1) {
        this.carList = data.sort((a, b) => {
          // console.log(a, b)
          let aTimeString = a.ORIENTATION_TIME
          let bTimeString = b.ORIENTATION_TIME
          aTimeString = aTimeString.replace(/-/g, '/')
          bTimeString = bTimeString.replace(/-/g, '/')
          const aTime = new Date(aTimeString).getTime()
          const bTime = new Date(bTimeString).getTime()
          return bTime - aTime
          // console.log(aTime, bTime)
        })
        console.log(this.carList)
      } else if (Number(this.radio) === 2) {
        this.carList = data.sort((a, b) => {
          // console.log(a, b)
          let aTimeString = a.WEIGHING_TIME
          let bTimeString = b.WEIGHING_TIME
          aTimeString = aTimeString.replace(/-/g, '/')
          bTimeString = bTimeString.replace(/-/g, '/')
          const aTime = new Date(aTimeString).getTime()
          const bTime = new Date(bTimeString).getTime()
          return bTime - aTime
          // console.log(aTime, bTime)
        })
        console.log(this.carList)
      }
      // console.log(this.carList)
      // if (this.radio === 1) {
      //   console.log('11')
      // }
    },
    handleCheckCar () {
      if (document.getElementById('checkbox_car').checked) {
        this.setPoints()
      } else {
        for (var i = 0; i < this.markerARR_Car.length; i++) {
          this.markerARR_Car[i].enableMassClear()
          this.allMap.removeOverlay(this.markerARR_Car[i])
        }
        this.markerARR_Car = []
      }
    },
    handleCheckCLC () {
      if (document.getElementById('checkbox_clc').checked) {
        // var bounds = this.allMap.getBounds()
        // var sw = bounds.getSouthWest()
        // var ne = bounds.getNorthEast()
        // var lngSpan = Math.abs(sw.lng - ne.lng)
        // var latSpan = Math.abs(ne.lat - sw.lat)
        // for (var j = 0; j < 25; j++) {
        //   var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7))
        //   var markerImage = new BMap.Icon(imgMarkerCLC, new BMap.Size(50, 50))
        //   var marker = new BMap.Marker(point, { icon: markerImage })
        //   marker.disableMassClear()
        //   this.allMap.addOverlay(marker)
        //   this.markerARR_CLC.push(marker)
        // }
        // var arr = [{ No: '1', Name: '天津碧海环保垃圾处理厂', Type: '边界点', LONGITUDE: '117.426409', LATITUDE: '38.872884' }, { No: '2', Name: '天津滨海新区垃圾焚烧发电厂', Type: '边界点', LONGITUDE: '117.725846', LATITUDE: '39.179505' }, { No: '3', Name: '天津滨海新区第二垃圾焚烧发电厂', Type: '边界点', LONGITUDE: '117.554278', LATITUDE: '38.786418' }, { No: '4', Name: '天津市双口生活垃圾卫生填埋场', Type: '边界点', LONGITUDE: '116.993805', LATITUDE: '39.236384' }]
        var pointPolygon = []
        for (var j = 0; j < this.clcList.length; j++) {
          var point = new BMap.Point(this.clcList[j].LONGITUDE, this.clcList[j].LATITUDE)
          pointPolygon.push(point)
        }
        // var polygon = new BMap.Polygon([new BMap.Point(117.425438, 38.872788), new BMap.Point(117.426718, 38.873610), new BMap.Point(117.427381, 38.872967), new BMap.Point(117.426111, 38.872155), new BMap.Point(117.425438, 38.872788)], { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5 })
        var polygon = new BMap.Polygon(pointPolygon)
        polygon.disableMassClear()
        this.allMap.addOverlay(polygon)
        this.markerARR_CLC.push(polygon)
        var polygonCenter = polygon.getBounds().getCenter()
        var markerImage = new BMap.Icon(imgMarkerCLC, new BMap.Size(50, 50))
        var marker = new BMap.Marker(polygonCenter, { icon: markerImage })
        marker.disableMassClear()
        var label = new BMap.Label('天津碧海环保垃圾处理厂', { offset: new BMap.Size(-10, 50) })
        marker.setLabel(label)
        this.allMap.addOverlay(marker)
        this.markerARR_CLC.push(marker)
        this.allMap.centerAndZoom(polygonCenter, 17)
      } else {
        for (var i = 0; i < this.markerARR_CLC.length; i++) {
          this.markerARR_CLC[i].enableMassClear()
          this.allMap.removeOverlay(this.markerARR_CLC[i])
        }
        this.markerARR_CLC = []
      }
    },
    handleCheckZZZ () {
      if (document.getElementById('checkbox_zzz').checked) {
        var bounds = this.allMap.getBounds()
        var sw = bounds.getSouthWest()
        var ne = bounds.getNorthEast()
        var lngSpan = Math.abs(sw.lng - ne.lng)
        var latSpan = Math.abs(ne.lat - sw.lat)
        for (var j = 0; j < 25; j++) {
          var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7))
          var markerImage = new BMap.Icon(imgMarkerZZZ, new BMap.Size(50, 50))
          var marker = new BMap.Marker(point, { icon: markerImage })
          marker.disableMassClear()
          this.allMap.addOverlay(marker)
          this.markerARR_ZZZ.push(marker)
        }
      } else {
        for (var i = 0; i < this.markerARR_ZZZ.length; i++) {
          this.markerARR_ZZZ[i].enableMassClear()
          this.allMap.removeOverlay(this.markerARR_ZZZ[i])
        }
        this.markerARR_ZZZ = []
      }
    },
    handleCheckRestaurant () {
      if (document.getElementById('checkbox_restaurant').checked) {
        var bounds = this.allMap.getBounds()
        var sw = bounds.getSouthWest()
        var ne = bounds.getNorthEast()
        var lngSpan = Math.abs(sw.lng - ne.lng)
        var latSpan = Math.abs(ne.lat - sw.lat)
        for (var j = 0; j < 25; j++) {
          var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7))
          var markerImage = new BMap.Icon(imgMarkerRestaurant, new BMap.Size(50, 50))
          var marker = new BMap.Marker(point, { icon: markerImage })
          marker.disableMassClear()
          this.allMap.addOverlay(marker)
          this.markerARR_Restaurant.push(marker)
        }
      } else {
        for (var i = 0; i < this.markerARR_Restaurant.length; i++) {
          this.markerARR_Restaurant[i].enableMassClear()
          this.allMap.removeOverlay(this.markerARR_Restaurant[i])
        }
        this.markerARR_Restaurant = []
      }
    },
    handleCheckRestaurant2 () {
      if (document.getElementById('checkbox_restaurant2').checked) {
        var bounds = this.allMap.getBounds()
        var sw = bounds.getSouthWest()
        var ne = bounds.getNorthEast()
        var lngSpan = Math.abs(sw.lng - ne.lng)
        var latSpan = Math.abs(ne.lat - sw.lat)
        for (var j = 0; j < 25; j++) {
          var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7))
          var markerImage = new BMap.Icon(imgMarkerRestaurant2, new BMap.Size(50, 50))
          var marker = new BMap.Marker(point, { icon: markerImage })
          marker.disableMassClear()
          this.allMap.addOverlay(marker)
          this.markerARR_Restaurant2.push(marker)
        }
      } else {
        for (var i = 0; i < this.markerARR_Restaurant2.length; i++) {
          this.markerARR_Restaurant2[i].enableMassClear()
          this.allMap.removeOverlay(this.markerARR_Restaurant2[i])
        }
        this.markerARR_Restaurant2 = []
      }
    },
    handleCheckVillage () {
      if (document.getElementById('checkbox_village').checked) {
        var bounds = this.allMap.getBounds()
        var sw = bounds.getSouthWest()
        var ne = bounds.getNorthEast()
        var lngSpan = Math.abs(sw.lng - ne.lng)
        var latSpan = Math.abs(ne.lat - sw.lat)
        for (var j = 0; j < 25; j++) {
          var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7))
          var markerImage = new BMap.Icon(imgMarkerVillage, new BMap.Size(50, 50))
          var marker = new BMap.Marker(point, { icon: markerImage })
          marker.disableMassClear()
          this.allMap.addOverlay(marker)
          this.markerARR_Village.push(marker)
        }
      } else {
        for (var i = 0; i < this.markerARR_Village.length; i++) {
          this.markerARR_Village[i].enableMassClear()
          this.allMap.removeOverlay(this.markerARR_Village[i])
        }
        this.markerARR_Village = []
      }
    },
    // 改变高度
    resize (x, y) {
      document.querySelector('.footer_info').style.height = this.footerHeight - y + 'px'
      document.querySelector('#map_box').style.height = this.mapHeight + 2 + y + 'px'
      // }
    },
    // 宽度
    resizeWidth (x) {
      document.querySelector('.map_right').style.width = this.asideWidth - x + 'px'
      document.querySelector('#map_box').style.width = this.mapWidth + x + 'px'
      document.querySelector('.map_top').style.width = this.mapWidth + x + 'px'
      document.querySelector('.map_select').style.right = this.asideWidth * 1.1 - x + 'px'
      document.querySelector('.footer_info').style.width = this.mapWidth + x + 'px'
      // }
    },
    // 加载地图方法
    showMap () {
      this.allMap = new BMap.Map('map_box')
      this.allMap.centerAndZoom(new BMap.Point(117.20, 39.12), 15)
      this.allMap.enableScrollWheelZoom(true)
      this.allMap.enableContinuousZoom()
      // this.allMap.setCurrentCity('天津')
      // map.enableScrollWheelZoom(true)
      // // 更改地图颜色主题
      // // map.setMapStyle({ style: 'midnight' })
      // // marker.setAnimation(BMAP_ANIMATION_BOUNCE)
      // this.getCarList()
      // console.log(this.carList)
      // // this.carList.forEach(item => {
      // // console.log(item)
      // // // map = new BMap.Map('map_box')
      // var point = new BMap.Point(117.149946, 39.207076)
      // // // // map.centerAndZoom(point, 12)
      // var marker = new BMap.Marker(point)// 创建标注
      // map.addOverlay(marker)// 将标注添加到地图中
      // // })
    },
    // echarts图
    char1 () {
      const myChart = this.$echarts.init(this.$refs.char1)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          textStyle: {
            color: '#ffffff'
          },
          data: ['机扫车', '垃圾车', '班组长', '环卫工']
        },
        color: ['#66CC00', '#FFFF00', '#CCFF99', '#FF9900', '#0099CC'],
        calculable: false,
        series: [{
          name: '车类型',
          type: 'pie',
          radius: ['40%', '70%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              }
            },
            // label: {
            //   show: true,
            //   position: 'center'
            // },
            emphasis: {
              label: {
                show: true,
                position: 'center',
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              }
            }
          },
          data: [
            { value: 335, name: '机扫车' },
            { value: 310, name: '垃圾车' },
            { value: 234, name: '班组长' },
            { value: 135, name: '环卫工' }
          ]
        }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () { myChart.resize() })
    },
    async getList () {
      const { data } = await this.$axios.get('http://111.160.78.62:9931/Companyapi/DataListCompany/GetCleanerAllListApi?ClientNo=0000004')
      // const { data } = await this.$axios.get('http://111.160.78.62:9931/api/DataListCompany/GetCleanerAllListApi?ClientNo=0000004')
      this.list = data
      // console.log(data)
    },
    // 获取车辆列表
    async getCarList () {
      // const { data } = await this.$axios.get('http://localhost:63067/Cityscapeapi/DataListCompany/GetRubbishCarListApi?ClientNo=0000012')
      // const { data } = await this.$axios.get('http://111.160.78.62:9931/Companyapi/DataListCompany/GetRubbishCarListApi?ClientNo=0000004')
      // var cod = localStorage.getItem('codes')
      // const { data } = await this.$axios.get('http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetKitchenCarListApi?ClientNo=' + cod)
      // console.log(data)
      if (Number(this.radio) === 1 || Number(this.radio) === 2) {
        this.agreeChange()
      }
      // this.carList = data.filter(item => {
      //   // console.log(item)
      //   // var d = new Date(item.ORIENTATION_TIME)
      //   // this.timmer = this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds())
      //   var weightTime = new Date(item.WEIGHTTIME)
      //   item.WEIGHTTIME = this.p(weightTime.getHours()) + ':' + this.p(weightTime.getMinutes()) + ':' + this.p(weightTime.getSeconds())
      //   // this.itemname = item.CLIENT_NAME.split('/').pop()
      //   // this.itemname = item.CLIENT_NAME.split('/').slice(0, 2).join('/')
      //   // item.ORIENTATION_TIME = item.ORIENTATION_TIME.replace('T', ' ')
      //   return item
      // })
      // console.log(this.carList)
    },
    // 获取车辆列表
    async getClcList () {
      const { data } = await this.$axios.get('http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetFactoryInfoApi?Type=1')
      this.clcList = data.filter(item => {
        return item
      })
      this.handleCheckCLC()
    },
    grouping () {
      var cod = localStorage.getItem('codes')
      // console.log(code)
      var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetGroupingModelsApi?ClientNo=' + cod
      this.$axios({
        url: url,
        method: 'get'
      }).then((res) => {
        // console.log(res.data)
        this.grouplist = res.data
      }).catch((error) => {
        console.log(error)
      })
    },
    async getmohu () {
      const _search = this.carname
      const newListData = []
      if (_search) {
        this.carList.filter(item => {
          if (item.LICENSE_PLATE.indexOf(_search) !== -1) {
            newListData.push(item)
          }
        })
      } else if (_search === '') {
        this.getCarList()
      }
      this.carList = newListData
    },
    p (s) {
      return s < 10 ? '0' + s : s
    },
    // 查询按钮
    async searchitem () {
      // console.log(this.carname)
      var cod = localStorage.getItem('codes')
      var coed = localStorage.getItem('coed')
      const { data } = await this.$axios.get('http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetKitchenCarListApi?ClientNo=' + cod)
      this.carList = data.filter(item => {
        // console.log(item.LICENSE_PLATE.indexOf(this.carname) > -1)
        if (item.LICENSE_PLATE.indexOf(this.carname) !== -1 && coed === item.CLIENT_NO) {
          return item
        } else if (coed === '00000' && item.LICENSE_PLATE.indexOf(this.carname) !== -1) {
          return item
        }
      })
    },
    async groups (event) {
      var cod = localStorage.getItem('codes')
      localStorage.setItem('coed', event.target.value)
      var coed = event.target.value
      const { data } = await this.$axios.get('http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetKitchenCarListApi?ClientNo=' + cod)
      this.carList = data.filter(item => {
        if (coed === item.CLIENT_NO) {
          console.log(item)
          return item
        } else if (coed === '00000') {
          return item
        }
      })
    },
    setPoints () {
      const _this = this
      setTimeout(() => {
        // this.allMap = new BMap.Map('map_box')
        // var point = new BMap.Point(117.149, 39.207)
        // this.allMap.centerAndZoom(point, 12)
        // 编写自定义函数, 创建标注
        function addMarker (point, carNo, item) {
          var myIcon
          if (item.CAR_TYPE === '小型垃圾车') {
            myIcon = new BMap.Icon(img, new BMap.Size(50, 50))
          } else if (item.CAR_TYPE === '垃圾转运车') {
            myIcon = new BMap.Icon(imgs, new BMap.Size(50, 50))
          } else if (item.CAR_TYPE === '餐厨车') {
            myIcon = new BMap.Icon(imgss, new BMap.Size(50, 50))
          }
          // item.filter(itm => {
          //   if (itm.CAR_TYPE === '小型垃圾车') {
          //     myIcon = new BMap.Icon(img, new BMap.Size(50, 50))
          //   } else if (itm.CAR_TYPE === '垃圾转运车') {
          //     myIcon = new BMap.Icon(imgs, new BMap.Size(50, 50))
          //   } else if (itm.CAR_TYPE === '餐厨车') {
          //     myIcon = new BMap.Icon(imgss, new BMap.Size(50, 50))
          //   }
          // })
          var marker = new BMap.Marker(point, { icon: myIcon })
          var label = new BMap.Label(carNo, { offset: new BMap.Size(20, -10) })
          marker.setLabel(label)
          _this.markerARR_Car.push(marker)
          _this.allMap.addOverlay(marker)
        }
        this.carList.forEach(item => {
          var point = new BMap.Point(item.LONGITUDE, item.LATITUDE)
          addMarker(point, item.LICENSE_PLATE, item)
        })
      }, 300)
    },
    exportExcelBaseInfo () {
      const excelName = '基础信息表'
      const tHeader = ['车辆编号', '车辆名称', '分组', '垃圾类型', '垃圾所属区', '处理场名称', '车辆类型']
      const filterVal = ['VID', 'LICENSE_PLATE', 'CLIENT_NAME', 'RUBBISHTYPE', 'RUBBISH_REGION', 'FACTORY', 'CAR_TYPE']
      export2Excel(tHeader, filterVal, this.carList, excelName)
    },
    exportExcelRealtimeInfo () {
      const excelName = '实时信息表'
      const tHeader = ['车辆编号', '车辆名称', '分组', '称重时间', '称重吨数', '垃圾类型', '垃圾所属区', '处理场名称', '车辆类型', '最终定位时间', '位置', '航向', '航速', '经度', '纬度']
      const filterVal = ['VID', 'LICENSE_PLATE', 'CLIENT_NAME', 'WEIGHING_TIME', 'TONNANG', 'RUBBISHTYPE', 'RUBBISH_REGION', 'FACTORY', 'CAR_TYPE', 'ORIENTATION_TIME', 'POSITION', 'Direction', 'SPEED', 'LONGITUDE', 'LATITUDE']
      export2Excel(tHeader, filterVal, this.carList, excelName)
    },
    dblClickRow (row) {
      console.log('双击' + row.LONGITUDE)
      var point = new BMap.Point(row.LONGITUDE, row.LATITUDE)
      this.allMap.centerAndZoom(point, 17)
      // eventBus.$emit('mapLocaltion', row)
    },
    // 右键表格某一行
    rowHandle (row, column, event) {
      window.event.returnValue = false
      this.row = row
      this.MouseEvent.left = event.clientX
      this.MouseEvent.top = event.clientY

      this.MouseEvent.isShow = true
      this.teamNumber = row.CLIENT_NO
    },
    // 轨迹回放
    trajectory () {
      this.MouseEvent.isShow = false
      // 进入轨迹回放页面
      this.$router.push({ name: 'playback', params: { VID: this.row.VID } })
    }
  },
  mounted () {
    this.showMap()
    // this.char1()
    this.handleCheckCar()
    this.getClcList()
    // 自动刷新
    this.timeId = setInterval(() => {
      this.getCarList()
      this.allMap.clearOverlays()
      this.handleCheckCar()
    }, 10000)
    // console.log(document.querySelector('.footer_info').clientHeight, this.footerHeight)
    // console.log(document.querySelector('.map_right').clientWidth, this.asideWidth)
  }
}
</script>

<style lang='less'>
.dropbtn {
  // background-color: #4caf50;
  background-color: #0080ff;
  color: white;
  padding: 9px;
  font-size: 9px;
  border: none;
  cursor: pointer;
}

.el-table--scrollable-x .el-table__body-wrapper {
  background: #081832;
}
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  // background-color: #3e8e41;
  background-color: #2894ff;
}
.table_find {
  width: 100%;
  display: flex;
  align-items: center;
  background: #081832;
  p {
    min-width: 160px;
    display: flex;
    align-items: center;
    margin: 0 8px;
    span {
      min-width: 55px;
      text-align: center;
    }
  }
  .babel_img {
    min-width: 60px;
    padding: 2px 0;
    img {
      margin-left: 5px;
    }
    button {
      padding: 0;
      color: #000;
    }
  }
  .onlion {
    border-radius: 3px;
    margin-right: 15px;
  }
  .sorts {
    color: #b2cbf3;
  }
  .el-radio {
    margin-right: 15px;
  }
}
.work_area_list {
  // height: 100%;
  // display: flex;
  // align-items: center;
  // padding: 0 10px;
  // position: relative;
  // cursor: default;
  // & > span:hover {
  //   color: #eee;
  // }
  width: 160px;
  border: 1px solid #ccc;
  background-color: #f3f3f3;
  position: absolute;
  top: 35px;
  z-index: 1;
  span {
    display: block;
    padding: 0 10px 0 20px;
    line-height: 26px;
    color: #333;
    &:hover {
      color: #fff;
      background-color: #2ea9fa;
    }
  }
}
#car_control {
  width: 100%;
  height: calc(~'100% - 80px');
  position: relative;
  #map_box {
    width: 100%;
    height: 100%;
  }
}
.footer_info {
  width: 85%;
  height: 35%;
  position: absolute;
  bottom: 0;
  background-color: #081832cc;
  // z-index: 99999;
  .vdr {
    position: absolute !important;
    top: 0 !important;
    // left: 0 !important;
    bottom: 0px !important;
    height: 100% !important;
    width: 100% !important;
    // width: 79% !important;
    // height: 25% !important;
  }
  .top_box {
    height: 50px;
    // background-color: #fff;
  }
  .content {
    width: 100%;
    height: calc(100% - 28px);
    overflow-x: scroll;
    // overflow: scroll;
    // overflow-y: hidden;
    margin-top: 0;
    box-shadow: -10px 0px 15px #034c6a inset, 0px -10px 15px #034c6a inset,
      10px 0px 15px #034c6a inset, 0px 10px 15px #034c6a inset;
  }
}
.map_right {
  position: absolute;
  right: 0;
  .vdr {
    position: absolute;
    left: 0 !important;
    height: 100% !important;
    width: 100% !important;
    /deep/.handle-tm {
      z-index: -99;
    }
  }

  /deep/#char1 div:first-child {
    margin: 0 auto !important;
  }
}
.el-table td,
.el-table th.is-leaf {
  border: none !important;
}
// .el-table{
//    box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
// }
.footer_info .content thead tr {
  padding: 5px 0;
}
.el-table th {
  padding: 5px 0 !important;
}
.el-table td {
  padding: 0 !important;
}
.el-table th,
.el-table tr {
  background-color: initial !important;
}
.el-table th {
  color: #61d2f7;
  font-size: 13px;
}
.el-table tr {
  box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset !important;
  background-color: #081832 !important;
  color: #fff;
  font-size: 13px;
}
.el-table__header thead tr {
  box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #12223c inset !important;
}
.el-table__empty-block {
  background: #081832 !important;
}
.row_box {
  width: 120px;
  // height: 130px;
  color: #666;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  position: fixed;
  span {
    display: block;
    text-align: center;
    line-height: 26px;
    cursor: default;
    &:hover {
      color: #fff;
      background-color: #3baefa;
    }
  }
}
</style>
